<template>
  <div class="activity-basic">
      <Breadcrumb>
          <BreadcrumbItem>活动设置</BreadcrumbItem>
          <BreadcrumbItem>活动设置</BreadcrumbItem>
      </Breadcrumb>
      <Form ref="data" :model="data" class="form" :rules="rules">
          <FormItem label="活动名" prop="name">
              <Input type="text" v-model="data.name" placeholder="活动名字"></Input>
          </FormItem>
          <FormItem label="地图是否开启3D模式">
              <Select v-model="data.open3d">
                  <Option :value="1">开启</Option>
                  <Option :value="0">关闭</Option>
              </Select>
          </FormItem>
          <FormItem label="活动响应关键词(公众号回复响应)" prop="response_keyword">
              <Input type="text" v-model="data.response_keyword" placeholder="活动响应关键词"></Input>
          </FormItem>
          <FormItem label="活动封面" prop="cover">
            <img-input v-model="data.cover" @change="coverChange" @remove="data.cover = ''"></img-input>
          </FormItem>
          <FormItem label="奖品兑换地址">
              <Input v-model="data.entity_address" type="text" placeholder="奖品兑换地址"></Input>
          </FormItem>
          <FormItem label="活动简介">
              <Input v-model="data.brief" type="textarea" placeholder="活动简介"></Input>
          </FormItem>
          <FormItem>
            <Button @click="submit('data')">确认设置</Button>
          </FormItem>
      </Form>
  </div>
</template>

<script>
import ImgInput from "../../components/ImgInput/ImgInput";
export default {
  name: 'activity-basic',
  data(){
    return {
        activity_id:sysinfo.activity_id,
        original_response_keyword:'',  //原响应关键词
        data:{
            name:'',   //活动名称
            response_keyword:'',  //活动响应关键词
            open3d:0,  //是否开启3d地图
            cover:'',  //活动封面
            entity_address:'',  //奖品兑换地址
            brief:''  //活动简介
        },
        rules:{
            name:[
                {required:true,message:'请输入活动名称',trigger:'blur'},
                {max:20,message:'活动名称超长'}
            ],
            response_keyword:[
                {max:6,message:'活动关键词超长'}
            ],
            cover:[
                {required: true,message:'请上传活动封面'}
            ]
        }
    }
  },
  components:{
      'img-input':ImgInput
  },
  created(){
    this.find();
  },
  methods:{
      //活动封面改变
      coverChange(cover){
          this.data.cover = cover;
      },
      //活动活动信息
      find(){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'activity',
            doing:'easyFind',
            activity_id:this.activity_id,
            return:['name','open3d','response_keyword','cover','entity_address','brief']
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    var {name,open3d,response_keyword,cover,entity_address,brief} = res.data.data;
                    this.data = {
                        name,
                        open3d:parseInt(open3d),
                        response_keyword,
                        cover,
                        brief,
                        entity_address
                    }
                    this.original_response_keyword = response_keyword;
                }
            })
            .catch(error=>console.log(error));
      },
      //提交
      submit(data){
          this.$refs[data].validate((valid) => {
              if(valid){
                  Axios.post(sysinfo.url,Qs.stringify({
                      pages:'activity',
                      doing:'edit',
                      activity_id:this.activity_id,
                      original_response_keyword:this.original_response_keyword,
                      data:this.data
                  }))
                      .then((res)=>{
                          if(res.data.status == 'success'){
                              this.original_response_keyword = this.data.response_keyword;
                              this.$Message.success('设置成功');
                          }else{
                              this.$Message.error(res.data.err_msg ? res.data.err_msg : '设置失败');
                          }
                      })
                      .catch(error=>console.log(error));
              }
          })
      }
  }
}
</script>

<style scoped>
    .activity-basic{
        padding:0 10px 20px 10px;
    }
    .form{
        width:400px;
    }
</style>
